<template>
	<div class="square">
		<!-- 嵌套路由示例 -->
		<!-- <div class="square">
      <router-link to="/components/btn1">
        <div class="square-l">点击切换1</div>
      </router-link>

      <router-link to="/components/btn2">
        <div class="square-r">点击切换2</div>
      </router-link>
    </div>
    <router-view></router-view> -->


		<!--  -->
		<top title="广场" show='' back='true'></top>
		<div class="square-search">
			<div class="square-search-l">
				<img class="address" src="../static/img/address.png" />
				<div style="position: relative;" @click="modalShow">
					<p>{{distanceText}}</p>
				</div>
				<img class="down" src="../static/img/down.png" />
				<!-- 下拉列表 -->

			</div>
			<div class="square-search-r">
				<img src="../static/img/search.png" />
			</div>
		</div>
		<div class="sqaur-tab">
			<ul>
				<li :style="current==1?{background:'#68BBBA'}:''" :data-type='1' @click="tabChange(1)">
					<img class="sq0" src="../static/img/sq0.png" />
					<span :style="current==1?{color:'#fff'}:''">猫咖</span>
				</li>
				<li :style="current==2?{background:'#68BBBA'}:''" :data-type='2' @click="tabChange(2)">
					<img class="sq1" src="../static/img/sq1.png" />
					<span :style="current==2?{color:'#fff'}:''">宠美</span>
				</li>
				<li :style="current==3?{background:'#68BBBA'}:''" :data-type='3' @click="tabChange(3)">
					<img class="sq2" src="../static/img/sq2.png" />
					<span :style="current==3?{color:'#fff'}:''">宠医</span>
				</li>
				<li :style="current==0?{background:'#68BBBA'}:''" :data-type='0' @click="tabChange(0)">
					<img class="sq3" src="../static/img/sq3.png" />
					<span :style="current==0?{color:'#fff'}:''">全部</span>
				</li>
			</ul>
		</div>
		<div class="square-list">
			<ul>
				<li v-for="(item,index) in data" @click="bussinessDetail(item.id)">
					<div class="square-list-l">
						<div class="bussiness-title">
							<div class="title-l">
								{{item.name}}
							</div>
							<div class="title-r">
								{{item.distance_str}}
							</div>
						</div>
						<!--  -->
						<div class="hot hot1">
							<div class="hot-con hot-con1">
								<img src="../static/img/hot.png" />
								<div>
									<p class="hot-con-num">{{item.heat}}</p>
									<p class="hot-con-txt">热度</p>
								</div>
							</div>
							<div class="hot-con">
								<img src='../static/img/appoint.png' />
								<div>
									<p class="hot-con-num">{{item.allocated_quantity}}次</p>
									<p class="hot-con-txt">预约量</p>
								</div>
							</div>
						</div>
						<div class="hot">
							<div class="hot-con">
								<img src="../static/img/hot.png" />
								<div class="hot-address">
									{{item.address}}
								</div>
							</div>
						</div>
					</div>
					<div class="square-list-r">
						<img :src="item.front_cover" />
					</div>
				</li>
			</ul>
		</div>
		<tabbar></tabbar>

		<!--  -->
		<!-- <router-view></router-view> -->

		<!-- 底部弹窗 -->
		<div class="down-list" @click.stop="cancleModal" v-if="show==true">
			<div class="down-list-con">
				<div class="down-btn">
					<div>取消</div>
					<div>确定</div>
				</div>
				<div class="down-btn2">
					<p v-for="(item,index) in downList" @click.stop="checkDistance(item.distance,item.text)" :style="distance==item.distance?{color:'#6BBDBC'}:''">{{item.text}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import top from '@/components/top.vue';
	import tabbar from '@/components/tabbar.vue';
	import modal from '../routeUrl.js';
	import globaldata from '../globaldata.js';

	export default {
		data() {
			return {
				current: 0,
				distance: 50,
				data: [],
				show: false,
				distanceText: '全部距离',
				downList: [{
					distance: 50,
					text: '全部距离'
				}, {
					distance: 3,
					text: '3km以内'
				}, {
					distance: 10,
					text: '10km以内'
				}, {
					distance: 20,
					text: '20km以内'
				}, ]
			}
		},
		components: {
			top,
			tabbar
		},
		methods: {
			tabChange(e) {
				console.log(e)
				this.current = e;
				this.square(e)
			},
			square(type) {
				let parms = {
					longitude: '120.384205',
					latitude: '36.073204',
					distance: this.distance,
					type: type || this.current
				}
				modal.square(parms).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.data = res.data
					}

				})
			},
			cancleModal() {
				this.show = false
			},
			modalShow() {
				this.show = true
			},
			checkDistance(distance, text) {
				this.distance = distance;
				this.distanceText = text;
				this.square(distance)
			},
			bussinessDetail(item) {
				this.$router.push({
					name:'bussiness_detail',
					query: item
				})
			}
		},
		created() {
			this.square()
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	@import '../assets/scss/main.scss';

	.down-list {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: rgba(0, 0, 0, 0.5);

		.down-btn {
			display: flex;
			display: -webkit-flex;
			justify-content: space-between;
			height: 37px;
			align-items: center;
			padding: 0 px2vw(20);
		}

		.down-btn2 {
			height: 151px;
			overflow: scroll;
		}

		.down-list-con {
			background: #FFFFFF;
			position: absolute;
			width: 100%;
			bottom: 0;
			height: 188px;

			left: 0;



			p {
				text-align: center;
				padding: px2vw(15) 0;
			}
		}
	}

	.square-list {
		ul {
			padding: px2vw(13);
			box-sizing: border-box;

			li {
				display: flex;
				display: -webkit-flex;
				justify-content: space-between;
				align-items: center;
				background: #FFFFFF;
				padding-left: px2vw(15);

				box-sizing: border-box;
				margin-bottom: px2vw(11);

				.square-list-l {
					padding-right: px2vw(15);
					box-sizing: border-box;
				}

				.square-list-r img {
					width: px2vw(124);
					height: px2vw(115);
					display: block;
				}

				.bussiness-title {
					display: flex;
					display: -webkit-flex;
					align-items: center;

					.title-l {
						font-size: px2vw(15);
						text-overflow: ellipsis;
						/*有些示例里需要定义该属性，实际可省略*/
						display: -webkit-box;
						-webkit-line-clamp: 1;
						/*规定超过两行的部分截断*/
						-webkit-box-orient: vertical;
						overflow: hidden;
						word-break: break-all;
						/*在任何地方换行*/
					}

					.title-r {
						height: px2vw(14);
						line-height: px2vw(14);
						padding: 0 px2vw(5);
						margin-left: px2vw(5);
						border-radius: px2vw(14);
						font-size: px2vw(10);
						color: #FFFFFF;
						background: #FB5492;
					}
				}

				.hot1 {
					margin-top: px2vw(16);
					margin-bottom: px2vw(10);
				}

				.hot {

					display: flex;
					display: -webkit-flex;
					align-items: center;

					.hot-con1 {
						margin-right: px2vw(50);
					}

					.hot-con {
						display: flex;
						display: -webkit-flex;
						align-items: center;

						div {
							font-size: px2vw(11);
							color: #737981;
							margin-left: px2vw(5);
						}

						img {
							width: px2vw(24);
							height: px2vw(24);
							display: block;
						}

						.hot-address {
							text-overflow: ellipsis;
							/*有些示例里需要定义该属性，实际可省略*/
							display: -webkit-box;
							-webkit-line-clamp: 1;
							/*规定超过两行的部分截断*/
							-webkit-box-orient: vertical;
							overflow: hidden;
							word-break: break-all;
							/*在任何地方换行*/
						}

						.hot-con-num {
							font-size: px2vw(11);
						}

						.hot-con-txt {
							font-size: px2vw(9);
							color: #737981;
						}
					}
				}
			}
		}
	}

	.sqaur-tab {
		background: #FFFFFF;
		padding: px2vw(16) px2vw(12);

		ul {
			display: flex;
			display: -webkit-flex;
			justify-content: space-between;
			align-items: center;

			li {
				display: flex;
				display: -webkit-flex;
				justify-content: center;
				align-items: center;
				width: px2vw(77);
				height: px2vw(38);
				background: #F5F5F5;
				border-radius: px2vw(5);

				img {
					display: block;
					margin-right: px2vw(7);
				}

				span {
					font-size: px2vw(12);
				}

				.sq0 {
					width: px2vw(20);
					height: px2vw(18);
				}

				.sq1 {
					width: px2vw(20);
					height: px2vw(17);
				}

				.sq2 {
					width: px2vw(26);
					height: px2vw(23);
				}

				.sq3 {
					width: px2vw(17);
					height: px2vw(19);
				}
			}
		}
	}

	.square-search {
		background: #FFFFFF;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
		padding: px2vw(12) px2vw(15);
		box-sizing: border-box;
	}

	.square-search-l {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		position: relative;



		.address {
			width: px2vw(13);
			height: px2vw(15);
			display: block;
			margin-right: px2vw(7);
		}

		.down {
			width: px2vw(12);
			height: px2vw(10);
			display: block;
			margin-left: px2vw(7);
		}

		p {
			font-size: px2vw(14);
		}
	}

	.square-search-r img {
		width: px2vw(14);
		height: px2vw(14);
		display: block;
	}

	.square {
		padding-bottom: 50px;
	}
</style>
